<template>
  <div class="quan">
    <div class="shui"></div>
  </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(240, 228, 228);
}

.quan {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 3px solid rgb(246, 247, 248);
  box-shadow: 0 0 0 3px rgb(41, 134, 196);
}

.shui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(23, 106, 201);
  border-radius: 50%;
  overflow: hidden;

  // 前伪元素
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 150%;
    height: 150%;
    border-radius: 40%; //设置圆角,改变波浪的大小
    background-color: #fff;
    animation: shi 5s linear infinite;

    @keyframes shi {
      0% {
        transform: translate(-50%, -65%) rotate(0deg);
      }

      100% {
        transform: translate(-50%, -65%) rotate(360deg);
      }
    }
  }

  // 后伪元素
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 150%;
    height: 150%;
    border-radius: 42%;
    background-color: #48aff0;
    animation: xu 7s linear infinite;

    @keyframes xu {
      0% {
        transform: translate(-50%, -60%) rotate(0deg);
      }

      100% {
        transform: translate(-50%, -60%) rotate(360deg);
      }
    }
  }
}
</style>